import React ,{useState}from 'react'
import { useNavigate } from 'react-router-dom'
import '../../css/dll/anli.scss'
import { InfiniteScroll, List } from 'antd-mobile'
import { mockRequest } from './mock-request'
export default function Anli() {
  const navigate = useNavigate();
  // const list =[
  //   {id:1,img:'../img/an3.png',title:'LB宽体更新一套就换一套，这才是战神R35的正确打开方式'},
  //   {id:2,img:'../img/an3.png',title:'LB宽体更新一套就换一套，这才是战神R35的正确打开方式'},
  //   {id:3,img:'../img/an3.png',title:'LB宽体更新一套就换一套，这才是战神R35的正确打开方式'},
  //   {id:3,img:'../img/an3.png',title:'LB宽体更新一套就换一套，这才是战神R35的正确打开方式'},
  //   {id:3,img:'../img/an3.png',title:'LB宽体更新一套就换一套，这才是战神R35的正确打开方式'},
  // ]
  const refanPage = () => {
    navigate('/home/playcar');
  }
  const [data, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    const append = await mockRequest()
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }


  return (
    <div
      style={{
        width: '100%',
        height: '95rem',
        color: '#fff',
        position: 'absolute',
        backgroundImage: 'url(../img/bei.png)',
        backgroundSize: '100% 100%',
      }}>
      <div className="dll_top">
        <img style={{
          margin: '0.6rem',
          float: 'left',
        }} src='../imgs/youjian.png' alt="" onClick={refanPage} />
        <span className='dll_top_mid'>案例精选</span>
        <img className='dll_top_right' src='../imgs/shai.png' alt="" />
      </div>
      <div  className='dll_context'> 
       {/* <List> */}
        {data.map((item,index)=>{
          return <div key={index} className='dll_context_list' > 
            <img src={item.img} alt="" />
            <span>
            {item.title}
            </span>
            {/* <img src={item.icon} alt="" /> */}
          </div>
        })}
      {/* </List> */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  )
}
